import React, { useState, useRef } from 'react'
import { StyleSheet, View, Animated, Dimensions, FlatList } from 'react-native'

// 引入组件
import VideoList from '../../../components/video/VideoList'
import ViewPager from '@react-native-community/viewpager';
import IconButton from '../../../components/button/IconButton'
import TextButton from '../../../components/button/TextButton'
import Panel from '../../../components/common/Panel';
import CommentItem from '../../../components/comment/CommentItem'

// 引入共享文件
import OpenCommentContext from '../../../context/OpenCommentContext'

// 获取屏幕的宽度
const { width } = Dimensions.get('window')

const Video = () => {
  // 创建一个Ref
  const viewPageRef = useRef(null)

  // 白线左边的位置
  const [lineLeft] = useState(new Animated.Value(0))

  // 评论框是否打开
  const [openComment, setOpenComment] = useState(false)

  return (
    <>
      <OpenCommentContext.Provider value={setOpenComment}>
        {/* 视频列表 */}
        <ViewPager
          style={styles.container}
          ref={viewPageRef}
          initialPage={0} // 展示第一个页面
          // 每次滑动完之后执行的事件  (移动底部白线功能)
          onPageSelected={(e) => {
            // 根据当前的下标计算出移动之后的位置
            let toValue = e.nativeEvent.position === 0 ? 0 : 62
            Animated.timing(lineLeft, {
              toValue, // 移动的位置
              duration: 200, // 0.2s
              useNativeDriver: true, // 是否启用原生动画驱动（left动画不支持原生）
            }).start()
          }}
        >
          {/* 关注 */}
          <View key='gz'>
            <VideoList />
          </View>
          {/* 推荐 */}
          <View key='tj'>
            <VideoList />
          </View>
        </ViewPager>
      </OpenCommentContext.Provider>

      {/* 按钮列表 */}
      <View style={styles.btnList}>
        {/* tv 按钮 */}
        <IconButton name="live-tv" color="white" />
        {/* 两个文字按钮 */}
        <View style={styles.textBtnList}>
          <View style={{ flexDirection: 'row', paddingLeft: 0 }}>
            <TextButton
              title="关注"
              style={[
                styles.textBtnLabel,
                {
                  paddingRight: '5%',
                },
              ]}
              onPress={() => {
                // 切换屏幕内容
                viewPageRef.current.setPage(0)
                // 白线移动的动画
                Animated.timing(lineLeft, {
                  toValue: 0,
                  duration: 200,
                  useNativeDriver: true
                }).start()
              }}
            />
            <TextButton
              title="推荐"
              style={styles.textBtnLabel}
              onPress={() => {
                // 切换屏幕内容
                viewPageRef.current.setPage(1)
                // 白线移动的动画
                Animated.timing(lineLeft, {
                  toValue: 62,
                  duration: 200,
                  useNativeDriver: true
                }).start()
              }}
            />
            <Animated.View
              style={[
                styles.line,
                {
                  transform: [
                    {
                      translateX: lineLeft
                    }
                  ]
                }
              ]}
            />
          </View>
        </View>
        {/* 搜索按钮 */}
        <IconButton name="search" color="white" />
      </View>

      {/* 评论列表 */}
      <Panel
        title='9527条评论'  // 标题
        open={openComment} // 是否打开
        onClose={() => {   // 点击关闭
          setOpenComment(false)
        }}
      >
        {/* 把数据传给Panel组件里 (数据先暂时模拟) */}
        <FlatList
          data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]}
          keyExtractor={(item) => item.toString()}
          renderItem={() => <CommentItem />}
        />
        {/* <CommentItem /> */}
      </Panel>
    </>
  )
}

export default Video

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: 'red'
  },
  btnList: {
    position: 'absolute',
    top: 30,
    paddingLeft: 15,
    paddingRight: 15,
    flexDirection: 'row' // 子元素横过来
  },
  textBtnList: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center', // 子元素在元素中居中
    justifyContent: 'center' // 子元素居中排列
  },
  textBtnLabel: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold'
  },
  line: {
    backgroundColor: 'white',
    height: 5,
    width: 35,
    position: 'absolute',
    left: 6,
    bottom: -7
  }
})
